<div>
  <h2>生产环境配置</h2>
  <h3>环境配置的封装</h3>
  <li>
    在生产环境中，我们关注的是如何让用户更快地加载资源，涉及如何压缩资源、如何添加资源、如何添加环境变量优化打包、如何最大限度地利用缓存等
  </li>
  <li>
    让 webpack 按照不同的环境采用不同到的配置，通常有两种方式，我们经常采用创建各自的配置文件
  </li>
  <li>
    webpack-merge 合并配置文件
  </li>
  <li>
    webpack4中直接加了一个 mode 配置项，让开发者可以通过它来直接切换打包模式。这意味着当前处于生产环境，webpack 会自动添加许多适用于生产环境的配置项，减少了人为手动的工作。
  </li>
  <li>
    source-map 指的是将编译、打包、压缩后的代码映射回源代码的过程
  </li>
  <li>
    Javascript 的 source-map 的配置很简单，只要在 webpack.config.js 中添加 devtool 即可，对于 CSS,SCSS,LESS 来说需要添加额外的 source-map 配置项
  </li>
  <li>
    开启 source-map 之后，打开谷歌的 Chrom 开发工具，在 Sources 选项卡下面的 webpack://目录中可以找到解析后的工程源码
  </li>
  <li>
    webpack 支持多种 source-map 的形式。其中 cheap-moudule-eval-source-map 通常是一个不错的选择，属于打包速度和源码信息还原程度的一个良好折中
  </li>
  <h3>资源压缩</h3>
  <li>
    压缩 JS 的方式在 webpack4 中默认使用 reser-webpack-plugin
  </li>
  <li>
    在 webpack4 中，压缩 JS 的配置被移动到了 config.optimization.minimize。如果配置了 mode:production,则不需要人为的设置 <span>(最好配置一下。配置下排除 node_modules 等加快打包速度)</span>
  </li>
  <li>
    压缩 css 的方式：webpack4 中用MiniCssExtractPlugin提取单文件 css,然后使用 OptimizeCSSAssetsPlugin来压缩
  </li>

  <h3>动态输出 HTML</h3>
  <li>
    html-webpack-plugin
  </li>
</div>